@zat-design/sisyphus-react 3.4.4 → 3.4.5-beta.1

package/lib/ProForm/components/combination/GroupCopy/style/index.less

@@ -0,0 +1,131 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+.border-radius(@start-end: 0, @end-end: 0, @start-start: 0, @end-start: 0) {
+  border-start-end-radius: @start-end;
+  border-end-end-radius: @end-end;
+  border-start-start-radius: @start-start;
+  border-end-start-radius: @end-start;
+}
+
+.start-radius() {
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+}
+
+.end-radius() {
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+}
+
+.pro-group {
+  width: unset !important;
+  
+
+  &.pro-group-diy-width, &.pro-group-width-auto {
+    .@{ant-prefix}-space .@{ant-prefix}-space-item {
+      width: auto;
+
+      .@{ant-prefix}-space-item {
+        width: auto;
+      }
+    }
+  }
+
+  .@{ant-prefix}-space {
+    width: 100%;
+
+    .@{ant-prefix}-space-item {
+      width: 100%;
+    }
+
+    .@{ant-prefix}-form-item {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .@{ant-prefix}-form-item-label {
+    display: none;
+  }
+
+  .@{ant-prefix}-space-compact {
+    flex: auto;
+    align-items: center;
+    width: 100%;
+
+    &>.@{ant-prefix}-input-number{
+      &:first-child{
+        border-end-end-radius: 0;
+        border-start-end-radius: 0;
+      }
+      &:last-child{
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+        margin-left: -1px;
+      }
+    }
+
+    .@{ant-prefix}-form-item {
+      margin-bottom: 0 !important;
+    }
+
+    .group-separator {
+      margin-inline-end: -2px;
+      margin-inline-start: -1px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding: 0 12px;
+      background-color: #fff;
+      cursor: default;
+    }
+    .pro-modal-select {
+      margin-left: -1px;
+      .@{ant-prefix}-input{
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    // 定制内敛合并样式
+    .@{ant-prefix}-input-affix-wrapper,
+    .@{ant-prefix}-select {
+      .border-radius(0, 0, 0, 0);
+
+      &:nth-child(n + 2) {
+        margin-inline-start: -1px;
+      }
+
+      &:first-child {
+        .start-radius();
+      }
+
+      &:last-child {
+        .end-radius();
+      }
+    }
+
+    .@{ant-prefix}-select {
+      .@{ant-prefix}-select-selector {
+        .border-radius(0, 0, 0, 0);
+      }
+
+      &:first-child {
+        .@{ant-prefix}-select-selector {
+          .start-radius();
+        }
+      }
+
+      &:last-child {
+        .@{ant-prefix}-select-selector {
+          .end-radius();
+        }
+      }
+    }
+
+    // 报错样式定制
+    .@{ant-prefix}-input-affix-wrapper-status-error ~ .group-separator {
+      color: var(--ant-error-color);
+      border-color: var(--ant-error-color);
+    }
+  }
+}

package/lib/ProForm/components/combination/GroupCopy/utils.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { InternalNamePath, NamePath } from 'antd/lib/form/interface';
+import { FormInstance } from 'antd';
+import { GroupColumnProps, SpaceType } from './propsType';
+import { ProFormColumnProps, ReactiveFunction } from '../../render/propsType';
+export type EventArgs = any[];
+/**
+ * 插入间隔符
+ * @param columns 表单配置数组
+ * @returns
+ */
+export declare const insertSeparator: (columns: GroupColumnProps[], space?: SpaceType) => any[];
+/** 带出event的组件默认取值方法 */
+export declare function defaultGetValueFromEvent(valuePropName: string, ...args: EventArgs): any;
+/** 转换names */
+export declare const transformNamesString: (arr: (string | string[])[]) => (string | string[])[];
+interface Params {
+    form?: FormInstance;
+    index?: number;
+    type?: string;
+    namePath?: InternalNamePath;
+    disabled?: boolean | ReactiveFunction<any, boolean>;
+    show?: boolean | ReactiveFunction<any, boolean>;
+    component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
+    fieldProps?: boolean | ReactiveFunction<any, boolean>;
+    name?: NamePath;
+}
+/** 计算响应式参数的值 */
+export declare const getReactiveProps: (params: Params) => {
+    disabled: boolean;
+    show: boolean;
+    component: any;
+    fieldProps: boolean;
+};
+type ValueTypeGetterParams = Pick<ProFormColumnProps, 'valueType' | 'switchValue' | 'toISOString'> & {
+    type?: any;
+    mode?: string;
+};
+/** 获取当前字段的转换函数 */
+export declare const getValueTypeTrans: (params: ValueTypeGetterParams) => any;
+interface ColumnsTransformerParams {
+    columns: GroupColumnProps[];
+    name?: NamePath;
+    names?: NamePath[];
+    value?: any[];
+    onChange: any;
+    namePath?: InternalNamePath;
+    form: FormInstance;
+    index?: number;
+}
+/** 转换columns */
+export declare const transformColumns: (params: ColumnsTransformerParams) => any[];
+export {};

package/lib/ProForm/components/combination/GroupCopy/utils.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultGetValueFromEvent = defaultGetValueFromEvent;
+exports.transformNamesString = exports.transformColumns = exports.insertSeparator = exports.getValueTypeTrans = exports.getReactiveProps = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _lodash = require("lodash");
+var _antd = require("antd");
+var _valueType = _interopRequireDefault(require("../../../utils/valueType"));
+/**
+ * 插入间隔符
+ * @param columns 表单配置数组
+ * @returns
+ */
+var insertSeparator = exports.insertSeparator = function insertSeparator(columns, space) {
+  if (!(space === null || space === void 0 ? void 0 : space.separator)) {
+    return columns;
+  }
+  return columns.reduce(function (result, current, index, array) {
+    // 将当前元素添加到结果数组中
+    result.push(current);
+    // 如果当前元素不是最后一个元素，则添加间隔符
+    if (index < array.length - 1) {
+      result.push({
+        component: (0, _jsxRuntime.jsx)(_antd.Button, {
+          className: "group-separator",
+          children: space.separator
+        }),
+        fieldProps: {
+          disabled: true
+        }
+      });
+    }
+    return result;
+  }, []);
+};
+/** 带出event的组件默认取值方法 */
+function defaultGetValueFromEvent(valuePropName) {
+  var event = arguments.length <= 1 ? undefined : arguments[1];
+  if (event && event.target && (0, _typeof2.default)(event.target) === 'object' && valuePropName in event.target) {
+    return event.target[valuePropName];
+  }
+  return event;
+}
+/** 转换names */
+var transformNamesString = exports.transformNamesString = function transformNamesString(arr) {
+  var result = arr.map(function (subArr) {
+    if (Array.isArray(subArr)) {
+      return subArr.join('_');
+    }
+    return subArr;
+  });
+  return result;
+};
+/** 计算响应式参数的值 */
+var getReactiveProps = exports.getReactiveProps = function getReactiveProps(params) {
+  var form = params.form,
+    index = params.index,
+    namePath = params.namePath,
+    disabled = params.disabled,
+    show = params.show,
+    component = params.component,
+    fieldProps = params.fieldProps,
+    name = params.name;
+  var values = form.getFieldsValue(namePath || undefined);
+  var _disabled = (0, _lodash.isFunction)(disabled) ? disabled(values, {
+    form: form,
+    index: index,
+    namePath: namePath
+  }) : disabled;
+  var _show = (0, _lodash.isFunction)(show) ? show(values, {
+    form: form,
+    index: index,
+    namePath: namePath
+  }) : show;
+  var _component = (0, _lodash.isFunction)(component) ? component(values, {
+    form: form,
+    index: index,
+    namePath: namePath
+  }) : component;
+  var _fieldProps = (0, _lodash.isFunction)(fieldProps) ? fieldProps(values, {
+    form: form,
+    index: index,
+    namePath: namePath
+  }) : fieldProps;
+  return {
+    disabled: _disabled,
+    show: _show,
+    component: _component,
+    fieldProps: _fieldProps
+  };
+};
+/** 获取当前字段的转换函数 */
+var getValueTypeTrans = exports.getValueTypeTrans = function getValueTypeTrans(params) {
+  var _valueTypeMap$valueTy;
+  var valueType = params.valueType;
+  var transform = (_valueTypeMap$valueTy = _valueType.default[valueType]) === null || _valueTypeMap$valueTy === void 0 ? void 0 : _valueTypeMap$valueTy.call(_valueType.default, params);
+  return transform;
+};
+/** 转换columns */
+var transformColumns = exports.transformColumns = function transformColumns(params) {
+  var form = params.form,
+    columns = params.columns,
+    name = params.name,
+    names = params.names,
+    outerIndex = params.index,
+    namePath = params.namePath,
+    value = params.value,
+    internalChange = params.onChange;
+  return columns === null || columns === void 0 ? void 0 : columns.flatMap(function (column, index) {
+    var type = column.type,
+      valueType = column.valueType,
+      switchValue = column.switchValue,
+      toISOString = column.toISOString,
+      fieldProps = column.fieldProps,
+      getValueFromEvent = column.getValueFromEvent,
+      _column$valuePropName = column.valuePropName,
+      valuePropName = _column$valuePropName === void 0 ? 'value' : _column$valuePropName,
+      normalize = column.normalize,
+      disabled = column.disabled,
+      show = column.show,
+      component = column.component;
+    var _ref = fieldProps || {},
+      mode = _ref.mode,
+      onChange = _ref.onChange,
+      onFieldChange = _ref.onFieldChange,
+      comDisabled = _ref.disabled;
+    var _disabled = disabled !== null && disabled !== void 0 ? disabled : comDisabled;
+    var columnName = names ? names[index] : [].concat(name, index);
+    // 响应式字段
+    var reactiveProps = getReactiveProps({
+      form: form,
+      index: index,
+      type: type,
+      namePath: namePath,
+      disabled: _disabled,
+      show: show,
+      component: component,
+      fieldProps: fieldProps,
+      name: columnName
+    });
+    if (reactiveProps.show === false) return [];
+    var transform = getValueTypeTrans({
+      type: type,
+      valueType: valueType,
+      switchValue: switchValue,
+      toISOString: toISOString,
+      mode: mode
+    });
+    var newValue;
+    var handleChange = function handleChange() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      if (getValueFromEvent) {
+        newValue = getValueFromEvent.apply(void 0, args);
+      } else {
+        newValue = defaultGetValueFromEvent.apply(void 0, [valuePropName].concat(args));
+      }
+      if ((transform === null || transform === void 0 ? void 0 : transform.normalize) || normalize) {
+        var _transform$normalize;
+        // @ts-ignore
+        newValue = ((_transform$normalize = transform.normalize) === null || _transform$normalize === void 0 ? void 0 : _transform$normalize.call(transform, newValue)) || (normalize === null || normalize === void 0 ? void 0 : normalize(newValue));
+      }
+      internalChange === null || internalChange === void 0 ? void 0 : internalChange(newValue, args[1], index);
+      onChange === null || onChange === void 0 ? void 0 : onChange.apply(void 0, args);
+      onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(newValue, form.getFieldValue(namePath), {
+        index: outerIndex,
+        namePath: namePath,
+        form: form
+      });
+    };
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, column), {}, {
+      name: columnName
+    }, reactiveProps), {}, {
+      fieldProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, column === null || column === void 0 ? void 0 : column.fieldProps), {}, {
+        onChange: handleChange,
+        value: value === null || value === void 0 ? void 0 : value[index]
+      })
+    });
+  });
+};

package/lib/ProForm/components/combination/ProModalSelect/index.js

@@ -15,7 +15,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _jsxRuntime = require("react/jsx-runtime");
 var _icons = require("@ant-design/icons");
 var _ahooks = require("ahooks");
-var _umi = require("umi");
 var _antd = require("antd");
 var _lodash = require("lodash");
 var _reactSvg = require("react-svg");
@@ -23,7 +22,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _index = require("../../../../index");
 var _Container = _interopRequireDefault(require("../../Container"));
 var _view = _interopRequireDefault(require("../../../../assets/view.svg"));
-var _useRequestList2 = _interopRequireDefault(require("./hooks/useRequestList"));
+var _useRequestList3 = _interopRequireDefault(require("./hooks/useRequestList"));
 var _locale = _interopRequireDefault(require("../../../../locale"));
 var _excluded = ["value", "onChange", "disabled", "labelInValue", "fieldNames", "readOnly", "addonAfter", "configOption", "title", "onFormat", "showCodeName", "optionRender", "customRender", "style", "className", "beforeOpen", "isTooltip", "searchForm", "defaultOne"],
   _excluded2 = ["onOk"],
@@ -124,17 +123,22 @@ var ProModalSelect = function ProModalSelect(props, ref) {
     form = _Form$useForm2[0];
   var selectedRows = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) || _selectedRows;
   var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || _selectedRowKeys;
-  var _useUmiRequest = (0, _umi.useRequest)(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options), {}, {
+  var _useRequestList = (0, _useRequestList3.default)(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, {
+      withPagination: withPagination,
+      transformParams: transformParams,
+      transformResponse: transformResponse
+    }, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options), {}, {
       manual: true,
-      onSuccess: function onSuccess(data) {
-        var list = withPagination ? data === null || data === void 0 ? void 0 : data.list : data;
+      onSuccess: function onSuccess(res) {
+        var _res$data;
+        var list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.list : res === null || res === void 0 ? void 0 : res.data;
         setState({
           options: list
         });
       }
     })),
-    run = _useUmiRequest.run;
-  var _useRequestList = (0, _useRequestList2.default)(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, {
+    run = _useRequestList.run;
+  var _useRequestList2 = (0, _useRequestList3.default)(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, {
       withPagination: withPagination,
       transformParams: transformParams,
       transformResponse: transformResponse
@@ -142,13 +146,13 @@ var ProModalSelect = function ProModalSelect(props, ref) {
       manual: true,
       ready: ((useRequest === null || useRequest === void 0 ? void 0 : useRequest.initParams) || defaultOne) && !readOnly || visible
     }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options)),
-    data = _useRequestList.data,
-    loading = _useRequestList.loading,
-    pagination = _useRequestList.pagination,
-    onSearch = _useRequestList.onSearch,
-    onReset = _useRequestList.onReset,
-    runAsync = _useRequestList.runAsync,
-    mutate = _useRequestList.mutate;
+    data = _useRequestList2.data,
+    loading = _useRequestList2.loading,
+    pagination = _useRequestList2.pagination,
+    onSearch = _useRequestList2.onSearch,
+    onReset = _useRequestList2.onReset,
+    runAsync = _useRequestList2.runAsync,
+    mutate = _useRequestList2.mutate;
   var defaultOptionRender = function defaultOptionRender(rowData) {
     return rowData === null || rowData === void 0 ? void 0 : rowData[labelKey];
   };
@@ -420,7 +424,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
   // 初始化回显，当传入initParams时，前端用来回险
   var getInitValues = /*#__PURE__*/function () {
     var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
-      var _contentForm$getField, _useRequest$options2, _useRequest$options3, queryBean, page, params, res, _list, list, _res$data, _data2, nextSelectRowKeys;
+      var _contentForm$getField, _useRequest$options2, _useRequest$options3, queryBean, page, params, res, _list, list, _res$data2, _data2, nextSelectRowKeys;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
@@ -449,7 +453,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
               if (transformResponse) {
                 list = transformResponse(res === null || res === void 0 ? void 0 : res.data);
               } else {
-                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.list : res === null || res === void 0 ? void 0 : res.data;
+                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.list : res === null || res === void 0 ? void 0 : res.data;
               }
               _data2 = isMultiple ? list : (_list = list) === null || _list === void 0 ? void 0 : _list[0];
               if (_data2) {
@@ -486,7 +490,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
   var getDefaultOneValues = /*#__PURE__*/function () {
     var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
       var _useRequest$options4, _useRequest$options5;
-      var queryBean, page, params, res, _list2, list, _res$data2, _data3, nextSelectRowKeys;
+      var queryBean, page, params, res, _list2, list, _res$data3, _data3, nextSelectRowKeys;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
@@ -508,7 +512,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
               if (transformResponse) {
                 list = transformResponse(res === null || res === void 0 ? void 0 : res.data);
               } else {
-                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.list : res === null || res === void 0 ? void 0 : res.data;
+                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.list : res === null || res === void 0 ? void 0 : res.data;
               }
               _data3 = isMultiple ? list : (_list2 = list) === null || _list2 === void 0 ? void 0 : _list2[0];
               nextSelectRowKeys = isMultiple ? value : [value];
@@ -667,7 +671,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
         // 没有值的时候，初始化点击默认查询前五十条
         if (!value && isInit || !(options === null || options === void 0 ? void 0 : options.length)) {
           var _useRequest$options9;
-          var queryBean = useRequest === null || useRequest === void 0 ? void 0 : (_useRequest$options9 = useRequest.options) === null || _useRequest$options9 === void 0 ? void 0 : _useRequest$options9.defaultParams;
+          var queryBean = (useRequest === null || useRequest === void 0 ? void 0 : (_useRequest$options9 = useRequest.options) === null || _useRequest$options9 === void 0 ? void 0 : _useRequest$options9.defaultParams) || {};
           var params = withPagination ? {
             pageNum: 1,
             pageSize: 50,

package/lib/ProForm/components/render/Render.js

@@ -153,9 +153,9 @@ var Render = function Render(props) {
   Object.assign(otherFormItemProps, transforms, {
     names: otherProps.names
   }, internalRule, {
-    required: typeof labelRequired === 'boolean' ? labelRequired : _required || (rules === null || rules === void 0 ? void 0 : rules.some(function (item) {
+    required: typeof labelRequired === 'boolean' ? labelRequired : _required || Array.isArray(rules) && (rules === null || rules === void 0 ? void 0 : rules.some(function (item) {
       return item === null || item === void 0 ? void 0 : item.required;
-    }))
+    })) || false
   }, otherProps.isView && !requiredOnView ? {
     required: false
   } : null, (0, _objectSpread2.default)({}, (0, _index.isTrim)(type, trim, (0, _ProConfigProvider.useProConfig)())), // 优先取传进来的，其次取ProConfigProvider配置的

package/lib/ProForm/components/render/propsType.d.ts

@@ -52,7 +52,7 @@ interface ControlProps {
 /**
  * 扩展函数的参数
  */
-type FunctionArgs<Values, R = any> = (value: any, record: any, { form, index, namePath, option, selectedOptions, dateString, }: {
+export type FunctionArgs<Values, R = any> = (value: any, record: any, { form, index, namePath, option, selectedOptions, dateString, }: {
     form: FormInstance<Values>;
     index?: number;
     namePath?: NamePath;

package/lib/ProIcon/config/index.d.ts

@@ -3,3 +3,17 @@ export declare const iconMap: {
     'text-cn': string;
     'text-en': string;
 }[];
+export declare const themeMap: {
+    '#006AFF': string[];
+    '#00BC70': string[];
+    '#FF8C16': string[];
+    '#A00F20': string[];
+    '#31AF96': string[];
+};
+export declare const themeFillMap: {
+    '#006AFF': string[];
+    '#00BC70': string[];
+    '#FF8C16': string[];
+    '#A00F20': string[];
+    '#31AF96': string[];
+};

package/lib/ProIcon/config/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconMap = void 0;
+exports.themeMap = exports.themeFillMap = exports.iconMap = void 0;
 var iconMap = exports.iconMap = [{
   type: 'view',
   'text-cn': '查看',
@@ -260,4 +260,20 @@ var iconMap = exports.iconMap = [{
   type: 'tiaozhengxuhao',
   'text-cn': '调整序号',
   'text-en': 'adjust order'
-}];
+}];
+// 渐变色icon预设
+var themeMap = exports.themeMap = {
+  '#006AFF': ['#ADDDFF', '#5FB3D8', '#4181FF'],
+  '#00BC70': ['#FFFFFF', '#54DFA7', '#00BC70'],
+  '#FF8C16': ['#FFFFFF', '#FFA74E', '#FF8C17'],
+  '#A00F20': ['#FFFFFF', '#E47B7B', '#A00E20'],
+  '#31AF96': ['#5FD8C7', '#5FD8C7', '#31AF96']
+};
+// 双色icon预设
+var themeFillMap = exports.themeFillMap = {
+  '#006AFF': ['none', '#87F1FC', 'black', '#4181FF'],
+  '#00BC70': ['none', '#05FFEC', 'black', '#00BC70'],
+  '#FF8C16': ['none', '#FED736', 'black', '#FF8C17'],
+  '#A00F20': ['none', '#FD8357', 'black', '#A00E20'],
+  '#31AF96': ['none', '#BBF392', 'black', '#31AF96']
+};