refactor: fixed up(#235) and adding docs to the sourceState prop (#237)

* fix: fixed up ts error on `/website`

* feat(deps): 增加@types react|react-dom to ^18.2.0 version

* feat: Add an additional 'sourceState' props attribute to the component.

* fix: fixed up eslint error

* fix: Option 'emitDeclarationOnly' cannot be specified with option 'noEmit'.

* refactor: fixed up(#235) and adding docs to the `sourceState` prop

Author: LonelyFellas

README.md

@@ -131,6 +131,10 @@ interface CodePreviewProps extends SplitProps {
    * @default light
    */
   theme?: ReactCodeMirrorProps['theme'];
+  /**
+   * Specifies the initial state of the source panel.
+   */
+  sourceState?: 'hidden' | 'shown';
 }
 ```
 

src/index.tsx

@@ -109,6 +109,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
     noPreview = false,
     noScroll = false,
     bgWhite = false,
+    sourceState,
     ...otherProps
   } = props;
   const {
@@ -183,6 +184,13 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
     setWidth(width === 1 ? '50%' : 1);
     setShowEdit(true);
   };
+  // 通过状态props属性判断是否切换源码
+  const isShown = sourceState === 'shown';
+  useEffect(() => {
+    setWidth(isShown ? '50%' : 1);
+    setShowEdit(isShown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShown]);
   const onCopyCode = () => {
     copyTextToClipboard(code || '', (isCopy) => setCopied(isCopy));
     setTimeout(() => setCopied(false), 2000);
@@ -196,7 +204,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
   };
   return (
     <Split data-color-mode={theme} visiable={visiable} className={cls} style={{ flex: 1, ...style }} {...otherProps}>
-      {!noPreview && !onlyEdit && (
+      {!onlyEdit && (
         <div
           className={[
             `${prefixCls}-demo`,
@@ -208,6 +216,7 @@ const CodePreview = React.forwardRef<CodePreviewRef, CodePreviewProps>((props, r
             .trim()}
           style={{
             flex: 1,
+            display: !noPreview ? 'unset' : 'none',
             ...(width === 1 ? { width: '100%' } : {}),
           }}
         >

src/useCodePreview.ts

@@ -16,13 +16,12 @@ export const getReactDOMClient = () => {
 };
 
 export function useCodePreview(props: CodePreviewProps) {
-  const isShowEdit = props.sourceState === 'shown';
   const [demoDom, setDemoDom] = useState<HTMLDivElement>();
   const playerId = useRef(`${parseInt(String(Math.random() * 1e9), 10).toString(36)}`);
   const [fullScreen, setFullScreen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
-  const [showEdit, setShowEdit] = useState(isShowEdit);
-  const [width, setWidth] = useState<number | string>(isShowEdit ? '50%' : 1);
+  const [showEdit, setShowEdit] = useState(false);
+  const [width, setWidth] = useState<number | string>(1);
   const [copied, setCopied] = useState(false);
   const [code, setCode] = useState(props.code || '');
 

website/Example.tsx

@@ -27,6 +27,7 @@ const Example = () => {
     noScroll: false,
     noPreview: false,
     bordered: true,
+    sourceState: false,
     codeSandbox: {
       files: {
         'sandbox.config.json': {
@@ -105,6 +106,7 @@ const Example = () => {
         noScroll={state.noScroll}
         bgWhite={state.bgWhite}
         noCode={state.noCode}
+        sourceState={state.sourceState ? 'shown' : 'hidden'}
         editProps={{
           onChange: (value) => {
             setState({
@@ -166,6 +168,10 @@ const Example = () => {
           是否显示滚动条 `noScroll={state.noScroll.toString()}`
         </Switch>
         <br />
+        <Switch checked={state.sourceState} onChange={handleChange.bind(this, 'sourceState')}>
+          是否显示源码 `sourceState={state.sourceState ? 'shown' : 'hidden'}`
+        </Switch>
+        <br />
         <Switch checked={state.bordered} onChange={handleChange.bind(this, 'bordered')}>
           是否显示边框 `bordered={state.bordered.toString()}`
         </Switch>