@ant-design/icons#PlayCircleFilled TypeScript Examples

The following examples show how to use @ant-design/icons#PlayCircleFilled. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From imove with MIT License 5 votes vote down vote up 
CodeRun: React.FC<ICodeRunProps> = (props) => {
  const { flowChart } = props;
  const [isRunning, setIsRunning] = useState(false);
  const [input, setInput] = useState(defaultInput);
  const [output, setOutput] = useState({});

  useEffect(() => {
    // NOTE: listen the event that iMove online exec ends
    const handler = (data: any) => {
      setIsRunning(false);
      // console.dir(data)

      if (isJson(data.detail) == true) {
        setOutput(data.detail || {});
        // console.dir( data.detail)
      }
    };
    window.addEventListener('iMoveOnlineExecEnds', handler);
    return () => {
      window.removeEventListener('iMoveOnlineExecEnds', handler);
    };
  }, []);

  const onClickRun = useCallback(() => {
    setIsRunning(true);
    const selectedCelssJson = toSelectedCellsJSON(flowChart);
    const compiledCode = compileForOnline(selectedCelssJson, input);
    executeScript(compiledCode);
  }, [flowChart, input]);

  const onChangeInput = useCallback((val: any) => {
    setInput(val);
  }, []);

  return (
    <div className={styles.container}>
      <SplitPane split={'horizontal'}>
        <Pane initialSize={'380px'} minSize={'43px'}>
          <SplitPane split={'vertical'}>
            <Pane className={styles.pane} minSize={'360px'} maxSize={'660px'}>
              <div className={styles.runWrapper}>
                {isRunning ? (
                  <Button size={'large'} type={'link'}>
                    <LoadingOutlined /> 运行中...
                  </Button>
                ) : (
                  <Button size={'large'} type={'link'} onClick={onClickRun}>
                    <PlayCircleFilled /> 运行代码
                  </Button>
                )}
              </div>
              <Card title={'输入'}>
                <InputPanel data={input} onChange={onChangeInput} />
              </Card>
            </Pane>
            <Pane className={styles.pane}>
              <Card title={'输出'}>
                <JsonView
                  name={null}
                  collapsed={false}
                  enableClipboard={false}
                  displayDataTypes={false}
                  displayObjectSize={false}
                  src={output}
                />
              </Card>
            </Pane>
          </SplitPane>
        </Pane>
        <Pane className={styles.pane} minSize={'40px'}>
          <Console />
        </Pane>
      </SplitPane>
    </div>
  );
}