@/utils#generateColumn TypeScript Examples

The following examples show how to use @/utils#generateColumn. 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 drip-table with MIT License 5 votes vote down vote up 
PreviewTable = (props: Props & { store: GlobalStore }) => {
  const {
    slots,
    ajv,
    ext,
    footer,
    subtableTitle,
    subtableFooter,
    rowExpandable,
    expandedRowRender,
  } = useGlobalData();

  const [state] = props.store;

  const schema: DripTableSchema<(DripTableColumnSchema | DripTableBuiltInColumnSchema)> = {
    ...filterAttributes(state.globalConfigs, '$version'),
    columns: state.columns.map(col => generateColumn(col)),
  };
  const totalPage = state.globalConfigs?.pagination && state.globalConfigs?.pagination.pageSize ? state.previewDataSource.length : 1;
  return (
    <div className={styles['table-preview-wrapper']}>
      <DripTable<DripTableRecordTypeWithSubtable<DripTableRecordTypeBase, React.Key>, DripTableExtraOptions>
        driver={(props.driver || DripTableDriverAntDesign)}
        schema={schema}
        total={totalPage}
        dataSource={state.previewDataSource}
        components={props.customComponents}
        {...{
          slots,
          ajv,
          ext,
          footer,
          subtableTitle,
          subtableFooter,
          rowExpandable,
          expandedRowRender,
        }}
      />
    </div>
  );
}
Example #2
Source File: index.tsx    From drip-table with MIT License 4 votes vote down vote up 
ToolLayout = (props: { store: GlobalStore }) => {
  const globalData = useGlobalData();

  const [state, actions] = props.store;
  const store = { state, setState: actions };

  const [modalStatus, setModalStatus] = useState('');
  const [code, setCode] = useState('');

  const getSchemaValue = (): DripTableSchema<DripTableColumnSchema> => ({
    ...filterAttributes(state.globalConfigs, '$version'),
    columns: state.columns.map(item => generateColumn(item)),
  });

  /**
   * 渲染一个Modal用来展示JSON Schema配置
   * @returns {JSX.Element} 返回React组件
   */
  const renderSchemaModal = () => {
    if (modalStatus !== 'export' && modalStatus !== 'import') {
      return null;
    }

    const defaultValue = modalStatus === 'export'
      ? JSON.stringify(getSchemaValue(), null, 4)
      : code || '';
    return (
      <Input.TextArea
        style={{ minHeight: '560px' }}
        value={defaultValue}
        onChange={(e) => {
          if (modalStatus === 'import') { setCode(e.target.value); }
        }}
      />
    );
  };

  return (
    <React.Fragment>
      <Button
        style={{ margin: '0 12px' }}
        size="small"
        onClick={() => { globalActions.toggleEditMode(store); }}
      >
        { state.isEdit ? '预览模式' : '编辑模式' }
      </Button>
      <Button
        style={{ margin: '0 12px' }}
        size="small"
        onClick={() => setModalStatus('import')}
      >
        导入配置
      </Button>
      <Button
        style={{ margin: '0 12px' }}
        size="small"
        onClick={() => {
          setModalStatus('export');
        }}
      >
        导出配置
      </Button>

      <Modal
        width={720}
        title={modalStatus === 'export' ? '导出数据' : '导入数据'}
        visible={modalStatus === 'export' || modalStatus === 'import'}
        cancelText={modalStatus === 'export' ? '确认' : '取消'}
        okText={modalStatus === 'export' ? '复制文本' : '确认导入'}
        onCancel={() => setModalStatus('')}
        onOk={() => {
          if (modalStatus === 'import') { // 导入解析
            const value = (code || '').trim();
            let hasError = false;
            try {
              const json = JSON.parse(value);
              state.globalConfigs = filterAttributes(json, ['columns']);
              state.columns = json.columns?.map((item, index) => ({ index, sort: index, ...item })) as DripTableColumn[];
              state.currentColumn = void 0;
            } catch {
              hasError = true;
              message.error('解析出错, 请传入正确的格式');
            } finally {
              if (!hasError) {
                globalActions.updateGlobalConfig(store);
                message.success('数据导入成功');
              }
            }
          } else { // 导出复制
            const aux = document.createElement('input');
            aux.setAttribute('value', JSON.stringify(getSchemaValue()));
            document.body.append(aux);
            aux.select();
            document.execCommand('copy');
            aux.remove();
            if (globalData.onExportSchema) {
              globalData.onExportSchema(getSchemaValue());
            }
            message.success('复制成功');
          }
          setModalStatus('');
          setCode('');
        }}
      >
        { renderSchemaModal() }
      </Modal>
    </React.Fragment>
  );
}