@zgfe/business-lib 1.0.0-beta.6 → 1.0.3

package/es/attrConditions/index.js

@@ -0,0 +1,160 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import BizAttributeSelector from '../attributeSelector';
+import { PropCategory } from '../attributeSelector/types';
+import './styles/index.less';
+import BizOperateList from './components/operateList';
+import ValuesList from './components/valuesList';
+import { Skeleton } from 'antd';
+export var classPrefix = 'biz-condition-item';
+
+var BizConditionItem = function BizConditionItem(props) {
+  var _props$defaultValue, _props$value, _props$defaultValue2, _props$value2;
+
+  var defaultValue = props.defaultValue,
+      eventIdList = props.eventIdList,
+      enableDelete = props.enableDelete,
+      enableEventProp = props.enableEventProp,
+      enableUserProp = props.enableUserProp,
+      enableEnvProp = props.enableEnvProp,
+      disableItemList = props.disableItemList;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      attr = _useState2[0],
+      setAttr = _useState2[1];
+
+  var _useState3 = useState(((_props$defaultValue = props.defaultValue) === null || _props$defaultValue === void 0 ? void 0 : _props$defaultValue.operation) || ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.operation)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      operate = _useState4[0],
+      setOperate = _useState4[1];
+
+  var _useState5 = useState(((_props$defaultValue2 = props.defaultValue) === null || _props$defaultValue2 === void 0 ? void 0 : _props$defaultValue2.values) || ((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.values)),
+      _useState6 = _slicedToArray(_useState5, 2),
+      values = _useState6[0],
+      setValues = _useState6[1];
+
+  var _useState7 = useState(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      ready = _useState8[0],
+      setReady = _useState8[1];
+
+  useEffect(function () {
+    var data = defaultValue || props.value;
+
+    if (data) {
+      var attrData;
+
+      if (data.propCategory === PropCategory.EventProp) {
+        if (data.attrId) {
+          attrData = {
+            id: data.attrId,
+            propCategory: data.propCategory,
+            type: data.type,
+            key: data.attrId
+          };
+        }
+      } else if (data.propCategory === PropCategory.UserProp || data.propCategory === PropCategory.EnvProp) {
+        if (data.attrName) {
+          attrData = {
+            name: data.attrName,
+            propCategory: data.propCategory,
+            type: data.type,
+            category: data.category,
+            key: "".concat(data.propCategory, "-").concat(data.attrName),
+            subtype: data.subtype
+          };
+        }
+      }
+
+      setAttr(attrData);
+    }
+
+    setReady(false);
+  }, []);
+
+  var onDelete = function onDelete() {
+    if (props.onDelete) props.onDelete();
+  };
+
+  useEffect(function () {
+    if (props.onChange) {
+      if (!attr) return;
+      var responseData = {
+        propCategory: attr.propCategory,
+        type: attr.type,
+        operation: operate,
+        values: values || []
+      };
+
+      if (attr.propCategory === PropCategory.EventProp) {
+        responseData.attrId = attr.id;
+      } else {
+        responseData.attrName = attr.name;
+        responseData.category = attr.category;
+
+        if (attr.propCategory === PropCategory.UserProp && attr.subtype) {
+          responseData.subtype = attr.subtype;
+        }
+      }
+
+      props.onChange(responseData);
+    }
+  }, [attr, operate, values]);
+
+  var onChangeAttr = function onChangeAttr(attrData) {
+    setAttr(attrData);
+  };
+
+  var onChangeOperate = function onChangeOperate(data) {
+    setOperate(data);
+  };
+
+  var onChangeValues = function onChangeValues(data) {
+    setValues(data);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    loading: ready,
+    active: true,
+    paragraph: {
+      rows: 2
+    }
+  }, /*#__PURE__*/React.createElement(BizAttributeSelector, {
+    value: attr,
+    eventIdList: eventIdList,
+    enableDelete: enableDelete,
+    enableEventProp: enableEventProp,
+    enableUserProp: enableUserProp,
+    enableEnvProp: enableEnvProp,
+    disableItemList: disableItemList,
+    onChange: onChangeAttr,
+    onDelete: onDelete
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-panel")
+  }, /*#__PURE__*/React.createElement(BizOperateList, {
+    attr: attr,
+    defaultValue: operate,
+    onChange: onChangeOperate
+  }), /*#__PURE__*/React.createElement(ValuesList, {
+    attr: attr,
+    operate: operate,
+    defaultValue: values,
+    onChange: onChangeValues
+  }))));
+};
+
+export default BizConditionItem;

package/es/attrConditions/styles/group.less

@@ -0,0 +1,49 @@
+@import '../../assets/styles/inner.less';
+
+.biz-condition {
+  display: flex;
+
+  /* 是筛选条件组 */
+  &-group-handle {
+    position: relative;
+    width: 1px;
+    margin-right: 16px;
+    margin-left: 8px;
+    background: @border-color-base;
+  }
+
+  &-group-operate {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    transform: translate(-50%, -50%);
+
+    &-text {
+      width: 16px;
+      height: 16px;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+
+      .__default-hover();
+
+      &:first-child {
+        border-radius: @border-radius-sx @border-radius-sx 0px 0px;
+      }
+
+      &:last-child {
+        border-radius: 0px 0px @border-radius-sx @border-radius-sx;
+      }
+
+      &.active {
+        color: #fff;
+        background: @primary-color;
+      }
+    }
+  }
+
+  &-item-container {
+    flex: 1;
+  }
+}

package/es/attrConditions/styles/index.less

@@ -0,0 +1,94 @@
+@import '../../assets/styles/inner.less';
+
+/* 筛选条件 */
+.biz-condition-item {
+  .__select-handle();
+
+  &-panel {
+    display: flex;
+    width: 100%;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  /* 覆盖属性组件样式 */
+  /* --- start --- */
+  .biz-attr-select-handle {
+    margin-bottom: 2px;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  .ant-input {
+    background-color: @background-color-gray;
+  }
+
+  .biz-attr-select-del-icon {
+    background-color: #fff;
+
+    &:hover {
+      .__error-hover();
+    }
+  }
+
+  // 自定义下拉框样式
+  .biz-select-handle-input {
+    background-color: @background-color-gray;
+    border: none;
+  }
+
+  /* --- end --- */
+
+  &-multi-select {
+    flex: 1;
+  }
+
+  &-single-select {
+    width: 100px;
+    margin-right: 8px;
+
+    &.gray {
+      color: @text-color-secondary;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+
+  &-input {
+    .ant-input-group-addon {
+      background-color: @background-color-gray;
+      border: none;
+    }
+
+    &-select {
+      width: 60px;
+      border: none;
+      border-left: 1px solid @border-color-split;
+    }
+  }
+
+  &-date.ant-picker {
+    flex: 1;
+    border-color: transparent;
+
+    &.ant-picker {
+      background-color: @background-color-gray;
+
+      &:hover {
+        background-color: @background-color-base;
+        border-color: @primary-color;
+      }
+
+      &.ant-picker-focused {
+        background-color: @background-color-base;
+        border-color: @primary-color;
+        box-shadow: @box-shadow-base;
+      }
+    }
+  }
+}

package/es/attrConditions/types.d.ts

@@ -0,0 +1,63 @@
+import { EnvProp, EventProp, PropType, UserProp } from '../attributeSelector/types';
+interface BasicAttrTypes {
+    eventIdList?: number[];
+    enableDelete?: boolean;
+    enableEventProp?: boolean;
+    enableUserProp?: boolean;
+    enableEnvProp?: boolean;
+    disableItemList?: (EventProp | UserProp | EnvProp)[];
+}
+export declare namespace AttrConditionTypes {
+    interface ItemValue {
+        subtype?: number;
+        attrId?: number;
+        attrName?: string;
+        type?: PropType;
+        propCategory?: 'userProp' | 'eventProp' | 'envProp';
+        category?: 'fixed' | 'custom';
+        operation?: string;
+        values?: string[];
+    }
+    interface GroupValue {
+        relation?: 'and' | 'or';
+        conditions: ItemValue[];
+    }
+    interface ItemProp extends BasicAttrTypes {
+        defaultValue?: ItemValue;
+        value?: ItemValue;
+        onChange?: (value: ItemValue) => void;
+        onDelete?: (value?: ItemValue) => void;
+    }
+    interface GroupProp extends BasicAttrTypes {
+        defaultValue?: GroupValue;
+        value?: GroupValue;
+        onChange?: (value: GroupValue) => void;
+        onConditionsCount?: (value: number) => void;
+    }
+    interface Option {
+        name: string;
+        value: string;
+    }
+    interface GroupAddKey {
+        key: number;
+        data?: ItemValue;
+    }
+}
+export declare enum OperateTypes {
+    Equal = "equal",
+    Contains = "contains",
+    NotEqual = "not equal",
+    NotContains = "not contains",
+    BeginWith = "begin with",
+    NotBeginWith = "not begin with",
+    NotEndWith = "not end with",
+    IsNull = "is null",
+    IsNotNull = "is not null",
+    GT = "gt",
+    LT = "lt",
+    GE = "ge",
+    LE = "le",
+    Relative = "relative",
+    Absolute = "absolute"
+}
+export {};

package/es/attrConditions/types.js

@@ -0,0 +1,19 @@
+export var OperateTypes;
+
+(function (OperateTypes) {
+  OperateTypes["Equal"] = "equal";
+  OperateTypes["Contains"] = "contains";
+  OperateTypes["NotEqual"] = "not equal";
+  OperateTypes["NotContains"] = "not contains";
+  OperateTypes["BeginWith"] = "begin with";
+  OperateTypes["NotBeginWith"] = "not begin with";
+  OperateTypes["NotEndWith"] = "not end with";
+  OperateTypes["IsNull"] = "is null";
+  OperateTypes["IsNotNull"] = "is not null";
+  OperateTypes["GT"] = "gt";
+  OperateTypes["LT"] = "lt";
+  OperateTypes["GE"] = "ge";
+  OperateTypes["LE"] = "le";
+  OperateTypes["Relative"] = "relative";
+  OperateTypes["Absolute"] = "absolute";
+})(OperateTypes || (OperateTypes = {}));

package/es/attrConditions/utils/operates.d.ts

@@ -0,0 +1,16 @@
+export declare const stringOperate: {
+    name: string;
+    value: string;
+}[];
+export declare const numberOperate: {
+    name: string;
+    value: string;
+}[];
+export declare const dateOperate: {
+    name: string;
+    value: string;
+}[];
+export declare const propSubtype: {
+    label: string;
+    value: string;
+}[];

package/es/attrConditions/utils/operates.js

@@ -0,0 +1,67 @@
+export var stringOperate = [{
+  name: '是',
+  value: 'equal'
+}, {
+  name: '包含',
+  value: 'contains'
+}, {
+  name: '不是',
+  value: 'not equal'
+}, {
+  name: '不包含',
+  value: 'not contains'
+}, {
+  name: '开头是',
+  value: 'begin with'
+}, {
+  name: '结尾是',
+  value: 'end with'
+}, {
+  name: '开头不是',
+  value: 'not begin with'
+}, {
+  name: '结尾不是',
+  value: 'not end with'
+}, {
+  name: '是空值',
+  value: 'is null'
+}, {
+  name: '不是空值',
+  value: 'is not null'
+}];
+export var numberOperate = [{
+  name: '>',
+  value: 'gt'
+}, {
+  name: '=',
+  value: 'equal'
+}, {
+  name: '<',
+  value: 'lt'
+}, {
+  name: '>=',
+  value: 'ge'
+}, {
+  name: '<=',
+  value: 'le'
+}, {
+  name: '≠',
+  value: 'not equal'
+}];
+export var dateOperate = [{
+  name: '最近',
+  value: 'relative'
+}, {
+  name: '固定时段',
+  value: 'absolute'
+}];
+export var propSubtype = [{
+  label: '时',
+  value: '1'
+}, {
+  label: '分',
+  value: '2'
+}, {
+  label: '秒',
+  value: '3'
+}];

package/es/attributeSelector/demo/index.d.ts

@@ -0,0 +1,3 @@
+import '@zgfe/business-lib/es/assets/styles/resetAntd.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/es/attributeSelector/demo/{singleForm.js → index.js}

@@ -11,56 +11,54 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { Button, Form } from 'antd';
-import BizAttributeSelector from '..';
-import eventData from '../data/event';
-import envData from '../data/env';
-import userData from '../data/user';
-var options = {
-  event: eventData,
-  user: userData,
-  env: envData
-};
+import { BizAttributeSelector, BizGlobalDataContext } from '@zgfe/business-lib';
+import '@zgfe/business-lib/es/assets/styles/resetAntd.less';
+import eventData from '../../mock/event';
+import envData from '../../mock/env';
+import userData from '../../mock/user';
+import convertAttributeData from '../util';
 export default (function () {
-  var _Form$useForm = Form.useForm(),
-      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
-      form = _Form$useForm2[0];
-
   var _useState = useState({
-    attr: 'visit_times'
+    id: 30183426,
+    propCategory: 'eventProp'
   }),
       _useState2 = _slicedToArray(_useState, 2),
-      formData = _useState2[0],
-      setFormData = _useState2[1];
+      attribute = _useState2[0],
+      setAttribute = _useState2[1];
 
-  var onFinish = function onFinish(values) {
-    setFormData(values);
-  };
+  var store = convertAttributeData({
+    eventList: eventData,
+    userPropList: userData,
+    envPropList: envData
+  });
 
-  var onFinishFailed = function onFinishFailed(errorInfo) {
-    console.log('Failed:', errorInfo);
-  };
+  function onChange(val) {
+    setAttribute(val);
+  }
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
-    form: form,
-    onFinish: onFinish,
-    onFinishFailed: onFinishFailed,
-    initialValues: formData
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    label: "\u5C5E\u6027",
-    name: "attr"
-  }, /*#__PURE__*/React.createElement(BizAttributeSelector, {
-    options: options,
-    showUserProp: true,
-    showEventEnv: true,
-    responseType: 'object'
-  })), /*#__PURE__*/React.createElement(Form.Item, {
-    wrapperCol: {
-      offset: 8,
-      span: 16
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "\u9009\u62E9\u7684\u5C5E\u6027\u662F\uFF1A", JSON.stringify(attribute)), /*#__PURE__*/React.createElement(BizGlobalDataContext.Provider, {
+    value: {
+      eventGroupList: store.eventGroupList,
+      userPropList: store.userPropList,
+      eventEnvList: store.envPropList
     }
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    htmlType: "submit"
-  }, "Submit"))), /*#__PURE__*/React.createElement("p", null, JSON.stringify(formData)));
+  }, /*#__PURE__*/React.createElement(BizAttributeSelector, {
+    enableEventProp: true,
+    enableUserProp: true,
+    eventIdList: [24143016],
+    value: attribute,
+    onChange: onChange,
+    enableDelete: true,
+    disableItemList: [{
+      propCategory: 'eventProp',
+      id: 30183424
+    }, {
+      name: 'is_anonymous',
+      propCategory: 'userProp'
+    }, {
+      name: 'browser_version',
+      propCategory: 'envProp'
+    }],
+    enableEnvProp: true
+  })));
 });

package/es/attributeSelector/index.d.ts

@@ -1,112 +1,5 @@
-import React, { ReactNode } from 'react';
-import { EventMetaProps } from '../utils/type';
-import './index.less';
-export interface AttrsListProps extends BasicOption {
-    value?: string | number;
-    text?: string;
-    attr_id?: string | number;
-    attr_name?: string;
-    alias_name?: string | null;
-    prop_type?: string | number;
-    icon?: string;
-    value_dict?: boolean;
-    hidden?: boolean | number;
-    dimension_sub?: string | number;
-    id?: number;
-    label?: string;
-    [prop: string]: any;
-}
-interface BasicOption {
-    attrId?: string;
-    id?: string | number;
-    label?: string | number;
-    name?: string;
-    dimensionId?: string;
-}
-export interface AttributeProps {
-    /**
-     * @description       若组件是表单选项，value就是form的initialValues，也是组件的默认选项
-     * @description.zh-CN
-     * @default           -
-     */
-    value?: string | number | AttrsListProps | null;
-    /**
-     * @description       默认选项,
-     * @description.zh-CN  可以是属性，也可以是事件属性的attr_name，其他属性的name -> value
-     * @default           -
-     */
-    defaultValue?: string | number | AttrsListProps | null;
-    /**
-     * @description       禁用的选项列表：key值列表
-     * @description.zh-CN
-     * @default           []
-     */
-    disabled?: Array<string | number>;
-    /**
-     * @description       返回数据类型
-     * @description.zh-CN  id | object
-     * @default          id
-     */
-    responseType?: string;
-    /**
-     * @description       数据化配置选项内容
-     * @description.zh-CN
-     * @default           -
-     */
-    options?: EventMetaProps;
-    /**
-     * @description       是否展示删除按钮
-     * @description.zh-CN
-     * @default           false
-     */
-    showDeleteIcon?: boolean;
-    /**
-     * @description       选择框是第几个
-     * @description.zh-CN
-     * @default           0
-     */
-    index?: number;
-    /**
-     * @description       选择框默认文本
-     * @description.zh-CN
-     * @default           请选择
-     */
-    placeholder?: string;
-    /**
-     * @description     是否展示事件属性
-     * @default           true
-     */
-    showEventProp?: Boolean;
-    /**
-     * @description     是否展示用户属性
-     * @default           true
-     */
-    showUserProp?: Boolean;
-    /**
-     * @description     是否展示触发环境
-     * @default           true
-     */
-    showEventEnv?: Boolean;
-    /**
-     * @description     如果是事件属性，则传事件id,多个用逗号隔开
-     * @default           -
-     */
-    eventIds?: string;
-    children?: ReactNode;
-}
-export interface AttributeSingleProps extends AttributeProps {
-    /**
-     * @description       选中 option 时，调用此函数
-     * @description.zh-CN
-     * @default
-     */
-    onChange?: (option: string | number | AttrsListProps, value: string | number | AttrsListProps, index: number) => void;
-    /**
-     * @description       删除选择框
-     * @description.zh-CN
-     * @default           -
-     */
-    onDelete?: () => void;
-}
-declare const BizAttributeSelector: React.FC<AttributeSingleProps>;
+import React from 'react';
+import { AttributeSelect } from './types';
+import './styles/index.less';
+declare const BizAttributeSelector: React.FC<AttributeSelect.Props>;
 export default BizAttributeSelector;