@zohodesk/docs-builder
Version:
docs-builder is used to build your own docs
205 lines (186 loc) • 9.08 kB
JavaScript
import React from "react";
import styles from "./PropTypes.module.css";
export default function PropTypes(_ref) {
let {
Components,
propComName
} = _ref;
function getTypeTagClass(hookType) {
let typeTagClass = styles.typeTag;
if (hookType === "string") {
typeTagClass += ` ${styles.stringType}`;
} else if (hookType === "bool") {
typeTagClass += ` ${styles.boolType}`;
} else if (hookType === "func") {
typeTagClass += ` ${styles.funcType}`;
} else if (hookType.includes("union") || hookType.includes("enum")) {
typeTagClass += ` ${styles.oneOfType}`;
} else if (hookType === "object") {
typeTagClass += ` ${styles.objectType}`;
} else if (hookType === "element") {
typeTagClass += ` ${styles.elementType}`;
} else if (hookType === "array") {
typeTagClass += ` ${styles.arrayType}`;
} else if (hookType === "shape") {
typeTagClass += ` ${styles.shapeType}`;
} else if (hookType === "number") {
typeTagClass += ` ${styles.numberType}`;
} else if (hookType === "exact") {
typeTagClass += ` ${styles.exactType}`;
} else if (hookType === "arrayOf") {
typeTagClass += ` ${styles.arrayType}`;
} else if (hookType === "instanceOf") {
typeTagClass += ` ${styles.instanceOfType}`;
} else if (hookType === "any") {
typeTagClass += ` ${styles.anyType}`;
} else if (hookType === "node") {
typeTagClass += ` ${styles.nodeType}`;
} else if (hookType === "objectOf") {
typeTagClass += ` ${styles.objectType}`;
} else if (hookType === "elementType") {
typeTagClass += ` ${styles.elementType}`;
} else if (hookType === "symbol") {
typeTagClass += ` ${styles.symbolType}`;
} else if (hookType === "customProp") {
typeTagClass += ` ${styles.customPropType}`;
}
return typeTagClass;
}
function renderTypeTag(propInfo, value) {
const hookInfo = propInfo[value];
const hookType = hookInfo && hookInfo.hookType ? hookInfo.hookType : 'customProp';
const typeTagClass = getTypeTagClass(hookType);
return /*#__PURE__*/React.createElement("div", {
className: typeTagClass
}, getHookType(propInfo, value));
}
function getHookType(propInfo, value) {
if (propInfo[value]) {
if (propInfo[value].hookType) {
let hookType = propInfo[value].hookType;
if (hookType.includes("union")) {
hookType = hookType.replace("union", "oneOfType ");
}
if (hookType.includes("enum")) {
hookType = hookType.replace("enum", "oneOf ");
}
return hookType;
} else {
return "customProp";
}
} else {
return "";
}
}
let propsObj = Components[propComName].docs.propTypes || {};
let currentCompProps = propsObj;
let defaultProps = Components[propComName].docs.defaultProps || {};
let currentCompPropsDescription = Components[propComName].docs.propsDescription || {};
let defaultPropsArray = [];
let currentDefaultPropsArray = [];
if (defaultProps.length) {
defaultProps.forEach(value => {
currentDefaultPropsArray.push(value);
});
}
let _propTypesToDefaultPropsArray = [];
let propsDesArray = [];
let _propTypesToPropsDesArray = [];
if (Array.isArray(propsObj) && propsObj.length) {
return /*#__PURE__*/React.createElement(React.Fragment, null, currentCompProps.map((result, i) => {
const currentDefaultProps = defaultProps[i] || {
undefined: ""
};
const _defaultProps = Object.keys(currentDefaultProps)[0].split("_")[0];
defaultPropsArray.push(_defaultProps);
const compName = Object.keys(result)[0];
const _propTypes = Object.keys(result)[0].split("_")[0];
const _propTypesToDefaultProps = _propTypes + "_defaultProps";
const propInfo = result[compName];
_propTypesToDefaultPropsArray.push(defaultPropsArray.includes(_propTypes) ? _propTypesToDefaultProps : "undefined");
const currentPropDes = currentCompPropsDescription[i] || {
undefined: ""
};
const _propDes = Object.keys(currentPropDes)[0].split("_")[0];
propsDesArray.push(_propDes);
const _propTypesToPropsDes = _propTypes + "_propsDescription";
_propTypesToPropsDesArray.push(propsDesArray.includes(_propTypes) ? _propTypesToPropsDes : "undefined");
return /*#__PURE__*/React.createElement("div", {
className: styles.propsTableContainer,
key: `container-${i}`
}, /*#__PURE__*/React.createElement("div", {
className: styles.compName
}, compName.split("_")[0]), /*#__PURE__*/React.createElement("div", {
className: styles.propsTable
}, /*#__PURE__*/React.createElement("div", {
className: styles.tableHeader
}, /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, "PropsName"), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, "Type"), /*#__PURE__*/React.createElement("span", {
className: `${styles.brR} ${styles.requiredColumn}`
}, "isRequired"), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, "Default Props"), currentCompPropsDescription ? /*#__PURE__*/React.createElement("span", null, "Props Description") : null), Object.keys(propInfo).sort().map((value, j) => /*#__PURE__*/React.createElement("div", {
className: styles.tableHeader,
key: `${i}-${j}`
}, /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, /*#__PURE__*/React.createElement("div", null, value)), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, renderTypeTag(propInfo, value)), /*#__PURE__*/React.createElement("span", {
className: `${styles.brR} ${styles.requiredColumn}`
}, propInfo[value] && propInfo[value].isRequired ? /*#__PURE__*/React.createElement("input", {
className: styles.checkbox,
type: "checkbox",
disabled: true
}) : /*#__PURE__*/React.createElement("input", {
className: styles.checkbox,
type: "checkbox",
disabled: true,
checked: true
})), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, /*#__PURE__*/React.createElement("div", null, _propTypesToDefaultPropsArray[i] !== "undefined" ? JSON.stringify(currentDefaultPropsArray.find(element => Object.keys(element)[0] === _propTypesToDefaultPropsArray[i])?.[_propTypesToDefaultProps]?.[value]) || "-" : "")), currentCompPropsDescription ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, _propTypesToPropsDesArray[i] !== "undefined" ? currentCompPropsDescription.find(element => Object.keys(element)[0] === _propTypesToPropsDesArray[i])?.[_propTypesToPropsDes]?.[value] || "-" : "-")) : null))));
}));
} else {
return /*#__PURE__*/React.createElement("div", {
className: styles.propsTableContainer
}, /*#__PURE__*/React.createElement("div", {
className: styles.compName
}, propComName.split("__")[propComName.split("__").length - 1]), /*#__PURE__*/React.createElement("div", {
className: styles.propsTable
}, /*#__PURE__*/React.createElement("div", {
className: styles.tableHeader
}, /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, "PropsName"), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, "Type"), /*#__PURE__*/React.createElement("span", {
className: `${styles.brR} ${styles.requiredColumn}`
}, "isRequired"), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, "Default Props"), Object.keys(currentCompPropsDescription).length > 0 ? /*#__PURE__*/React.createElement("span", null, "Props Description") : null), Object.keys(currentCompProps).sort().map((result, i) => /*#__PURE__*/React.createElement("div", {
className: styles.tableHeader,
key: `${i}`
}, /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, /*#__PURE__*/React.createElement("div", null, result)), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, renderTypeTag(propsObj, result)), /*#__PURE__*/React.createElement("span", {
className: `${styles.brR} ${styles.requiredColumn}`
}, propsObj[result] && propsObj[result].isRequired ? /*#__PURE__*/React.createElement("input", {
className: styles.checkbox,
type: "checkbox",
disabled: true
}) : /*#__PURE__*/React.createElement("input", {
className: styles.checkbox,
type: "checkbox",
disabled: true,
checked: true
})), /*#__PURE__*/React.createElement("span", {
className: styles.brR
}, /*#__PURE__*/React.createElement("div", null, JSON.stringify(defaultProps[result]) || "-")), Object.keys(currentCompPropsDescription).length > 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, currentCompPropsDescription[result] || "-")) : null))));
}
}