silki/lib/snippet.js

Cli tool for build react app, based on generator-react-multipage, create-react-app, roadhog. Support react multiple pages app develop.

'use strict';

var _copyPaste = require('copy-paste');

var _copyPaste2 = _interopRequireDefault(_copyPaste);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var modalSnippet = '\n  <Modal\n    key={visible}\n    visible={visible}\n    title={modalTitle}\n    width={window.g_MODAL_WIDTH}\n    wrapClassName="vertical-center-modal"\n    footer={null}\n    onOk={::this.handleModalOk}\n    onCancel={::this.handleModalCancel}\n    maskClosable={false}\n  >\n    <div className="modal-content-wrapper">\n      <EditForm\n        isAdd={isAdd}\n        data={curData}\n        onOk={this.handleModalOk}\n        onCancel={this.handleModalCancel}\n      />\n    </div>\n  </Modal>\n';

var modal2Snippet = '\n  if (res.success !== true) {\n    Modal.error({\n      title: \'\u63A5\u53E3\u51FA\u9519\',\n      content: \'\u83B7\u53D6\u5217\u8868\u6570\u636E\u51FA\u9519\uFF0C\' + res.message\n    });\n    return;\n  }\n  this.setState({\n    listData: res.data.data,\n    total: res.data.totalCount\n  });\n';

var formSnippet = '\n\'use strict\';\n\nimport { Form, Button, message, Modal, Select, Input } from \'antd\';\nimport ShowSelect from \'components/ShowSelect/ShowSelect\';\nimport Fetcher from \'../../Fetcher\';\nimport \'./EditForm.less\';\nconst FormItem = Form.Item;\nconst { Option } = Select;\n\nclass EditForm extends React.Component {\n  save = () => {\n    this.props.form.validateFieldsAndScroll((err, values) => {\n      if (!err) {\n        const { isAdd } = this.props;\n        const { id } = this.props.data;\n        if (values.showInfo) {\n          values.showid = values.showInfo.key;\n          values.showname = values.showInfo.label;\n          delete values.showInfo;\n        }\n        if (isAdd) {\n          Fetcher.addLinkVideoConfig(values)\n          .then(res => {\n            if (res.success !== true) {\n              Modal.error({\n                title: \'\u63A5\u53E3\u51FA\u9519\',\n                content: \'\u6DFB\u52A0\u77ED\u5E26\u957F\u914D\u7F6E\u51FA\u9519\uFF0C\' + res.message\n              });\n              return;\n            }\n            message.success(\'\u6DFB\u52A0\u77ED\u5E26\u957F\u914D\u7F6E\u6210\u529F\');\n            this.props.onOk();\n            this.props.refresh && this.props.refresh();\n          });\n        } else {\n          Fetcher.updateLinkVideoConfig(id, values)\n          .then(res => {\n            if (res.success !== true) {\n              Modal.error({\n                title: \'\u63A5\u53E3\u51FA\u9519\',\n                content: \'\u7F16\u8F91\u77ED\u5E26\u957F\u914D\u7F6E\u51FA\u9519\uFF0C\' + res.message\n              });\n              return;\n            }\n            message.success(\'\u7F16\u8F91\u77ED\u5E26\u957F\u914D\u7F6E\u6210\u529F\');\n            this.props.onOk();\n            this.props.refresh && this.props.refresh();\n          });\n        }\n      }\n    });\n  }\n\n  cancel = () => {\n    this.props.onCancel();\n  }\n\n  // \u5904\u7406\u8282\u76EE\u53D8\u5316\u65F6\uFF0C\u5C55\u793A\u56FE\u7247\u53D8\u5316\n  handleShowChange = (showData) => {\n    if (showData && showData.showThumbUrlBig) {\n      this.setState({ poster: showData.showThumbUrlBig });\n    }\n  }\n\n  render() {\n    const data = this.props.data || {};\n    const { getFieldDecorator } = this.props.form;\n    const formItemLayout = {\n      labelCol: { span: 5 },\n      wrapperCol: { span: 15 }\n    };\n\n    return (\n      <Form className="short-link-long-editformComponent">\n        <FormItem\n          {...formItemLayout}\n          label=\'\u540D\u79F0\'\n        >\n          {getFieldDecorator(\'name\',{\n            initialValue: data.name\n          })(\n            <Input />\n          )}\n        </FormItem>\n        <FormItem\n          {...formItemLayout}\n          label=\'\u5173\u8054\u8282\u76EE\'\n        >\n          {getFieldDecorator(\'showInfo\', {\n            initialValue: { key: data.showid && data.showid + \'\' || \'\', label: data.showname || \'\' }\n          })(\n            <ShowSelect onShowChange={this.handleShowChange} />\n          )}\n        </FormItem>\n        <FormItem\n          {...formItemLayout}\n          label=\'\u5173\u8054\u5267\u96C6\'\n        >\n          {getFieldDecorator(\'stageType\', {\n            initialValue: data.stageType && data.stageType + \'\' || \'1\'\n          })(\n            <Select>\n              <Option value="1">\u7B2C\u4E00\u96C6\uFF08\u671F\uFF09</Option>\n              <Option value="-1">\u6700\u65B0\u4E00\u96C6\uFF08\u671F\uFF09</Option>\n            </Select>\n          )}\n        </FormItem>\n\n        <div className="modal-footer">\n          <Button type="primary" size="large" onClick={this.save}>\u4FDD\u5B58</Button>\n          <Button size="large" style={{ marginLeft: 16 }} onClick={this.cancel}>\u53D6\u6D88</Button>\n        </div>\n      </Form>\n    );\n  }\n}\n\nEditForm.displayName = \'EditForm\';\nconst WrappeEditForm = Form.create()(EditForm);\nexport default WrappeEditForm;\n';

var form2Snippet = '\n\'use strict\';\n\nimport { Form, Button, Select } from \'antd\';\nimport PgyUserSelect from \'components/PgyUserSelect/PgyUserSelect\';\nimport \'./QueryForm.less\';\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\n.QueryFormComponent {\n  .form-wrap {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 5px 0;\n  }\n  .btn-group {\n    margin-bottom: 5px;\n  }\n  .ant-form-item-control-wrapper {\n    min-width: 160px;\n  }\n  .ant-form-item {\n    margin-bottom: 10px;\n  }\n  label {\n    font-weight: 700;\n  }\n}\n\nclass QueryForm extends React.Component {\n\n  handleSearch = (e) => {\n    e && e.preventDefault();\n    this.props.form.validateFields((err, values) => {\n      if (!err) {\n        this.props.onQuery(values);\n      }\n    });\n  }\n\n  handleReset = () => {\n    this.props.form.resetFields();\n    this.props.onQuery();\n  }\n\n  render() {\n    const { getFieldDecorator } = this.props.form;\n    return (\n      <Form layout="inline" className="QueryFormComponent">\n        <div className="form-wrap">\n          <FormItem label="\u5408\u4F5C\u65B9">\n            {getFieldDecorator(\'status\', {initialValue: \'\'})(\n              <Select>\n                <Option value="">\u5168\u90E8</Option>\n                <Option value="1">\u4E0A\u7EBF</Option>\n                <Option value="0">\u4E0B\u7EBF</Option>\n              </Select>\n            )}\n          </FormItem>\n          <FormItem label="\u84B2\u516C\u82F1\u5E10\u53F7">\n            {getFieldDecorator(\'name\', {initialValue: \'\'})(\n              <PgyUserSelect showAll />\n            )}\n          </FormItem>\n          <FormItem label="\u4F7F\u7528\u6A21\u677F">\n            {getFieldDecorator(\'template\', {initialValue: \'\'})(\n              <Select>\n                <Option value="">\u5168\u90E8</Option>\n                <Option value="1">\u4E0A\u7EBF</Option>\n                <Option value="0">\u4E0B\u7EBF</Option>\n              </Select>\n            )}\n          </FormItem>\n          <FormItem label="\u662F\u5426\u72EC\u64AD">\n            {getFieldDecorator(\'unique\', {initialValue: \'\'})(\n              <Select>\n                <Option value="">\u4E0D\u9650\u5236</Option>\n                <Option value="1">\u4EC5\u9650\u72EC\u64AD</Option>\n                <Option value="0">\u4EC5\u9650\u975E\u72EC\u64AD</Option>\n              </Select>\n            )}\n          </FormItem>\n        </div>\n        <div className="btn-group">\n          <Button style={{marginRight: 10}} type="primary" onClick={this.handleSearch}>\u67E5\u8BE2</Button>\n          <Button style={{marginRight: 10}} onClick={this.handleReset}>\u91CD\u7F6E</Button>\n          <Button type="primary" onClick={this.props.onAdd}>\u6DFB\u52A0\u65B9\u6848</Button>\n        </div>\n      </Form>\n    );\n  }\n}\n\nQueryForm.displayName = \'QueryForm\';\nconst wrappedQueryForm = Form.create()(QueryForm);\nexport default wrappedQueryForm;\n';

var tableSnippet = '\n    this.columns = [\n      {\n        title: \'ID\',\n        dataIndex: \'id\',\n        key: \'id\'\n      },\n      {\n        title: \'\u9002\u7528\u8303\u56F4\',\n        dataIndex: \'type\',\n        key: \'type\',\n        render: type => window.g_PRE_CONFIG_TYPE_MAP[type + \'\']\n      },\n      {\n        title: \'\u5F00\u5173\u677F\u540D\u79F0\',\n        dataIndex: \'name\',\n        key: \'name\'\n      },\n      {\n        title: \'\u524D\u8D34\u7247\',\n        dataIndex: \'config.headVideoInfo.thumbnail\',\n        key: \'config.headVideoInfo.thumbnail\',\n        render: (img, record) => {\n          const config = record.config || {};\n          const headVideoInfo = config.headVideoInfo || {};\n          const vid = headVideoInfo.videoId;\n          const url = vid ? URL_BEFORE + vid + URL_AFTER : \'\';\n          const seconds = headVideoInfo.seconds;\n          return (\n            <a target="_blank" href={url}>\n              <div className="img-wrap">\n                <img src={img} />\n                { seconds ? <span className="duration-info">{seconds} \u79D2</span> : \'\' }\n              </div>\n            </a>\n          );\n        }\n      },\n      {\n        title: \'\u540E\u8D34\u7247\',\n        dataIndex: \'config.tailVideoInfo.thumbnail\',\n        key: \'config.tailVideoInfo.thumbnail\',\n        render: (img, record) => {\n          const config = record.config || {};\n          const tailVideoInfo = config.tailVideoInfo || {};\n          const vid = tailVideoInfo.videoId;\n          const url = vid ? URL_BEFORE + vid + URL_AFTER : \'\';\n          const seconds = tailVideoInfo.seconds;\n          return (\n            <a target="_blank" href={url}>\n              <div className="img-wrap">\n                <img src={img} />\n                { seconds ? <span className="duration-info">{seconds} \u79D2</span> : \'\' }\n              </div>\n            </a>\n          );\n        }\n      },\n      {\n        title: \'\u662F\u5426\u88C1\u526A\',\n        dataIndex: \'config.startCutSeconds\',\n        key: \'config.startCutSeconds\',\n        render: (img, record) => {\n          const config = record.config || {};\n          const startCutSeconds = config.startCutSeconds;\n          const endCutSeconds = config.endCutSeconds;\n          return (startCutSeconds || endCutSeconds) ?\n            <div>\n              <p>\u524D {startCutSeconds} \u6BEB\u79D2</p>\n              <p>\u540E {endCutSeconds} \u6BEB\u79D2</p>\n            </div> :\n            <p>\u65E0\u88C1\u526A</p>;\n        }\n      },\n      {\n        title: \'\u66F4\u65B0\u65F6\u95F4\',\n        dataIndex: \'updatetime\',\n        key: \'updatetime\',\n        render: time => moment(time).format(\'YYYY-MM-DD HH:mm:ss\')\n      },\n      {\n        title: \'\u64CD\u4F5C\u4EBA\',\n        dataIndex: \'creatorName\',\n        key: \'creatorName\'\n      },\n      {\n        title: \'\u64CD\u4F5C\',\n        key: \'operate\',\n        render: (text, record) => {\n          return (\n            <div style={{ minWidth: 64 }}>\n              <a onClick={() => this.props.onEdit(record.id)}\n                href="javascript:void(0)">\u7F16\u8F91</a>\n              <span className="ant-divider" />\n              <a onClick={() => this.deleteMethod(record.id, record.name)}\n                className="red"\n                href="javascript:void(0)">\u5220\u9664</a>\n            </div>\n          );\n        }\n      }];\n\n      <Table\n        rowKey="id"\n        columns={this.columns}\n        dataSource={data}\n        loading={loading}\n        pagination={{\n          showSizeChanger: true,\n          showQuickJumper: true,\n          pageSizeOptions: [\'10\', \'20\', \'40\', \'60\', \'80\', \'100\'],\n          pageSize: pageSize,\n          total: total,\n          current: pageNo,\n          onChange: onPageChange,\n          onShowSizeChange: onShowSizeChange\n        }}\n      />\n';

var copyStr = '没有可复制代码，可选 modal, form, modal2, form2, table';
switch (process.argv[2]) {
  case 'modal':
    copyStr = modalSnippet;
    break;
  case 'form':
    copyStr = formSnippet;
    break;
  case 'modal2':
    copyStr = modal2Snippet;
    break;
  case 'form2':
    copyStr = form2Snippet;
    break;
  case 'table':
    copyStr = tableSnippet;
    break;
  default:
    break;
}

_copyPaste2.default.copy(copyStr, function () {
  console.log(copyStr);
});