cloud-business 0.1.98 → 0.1.99-1

package/demos/components/code-box/index.less

@@ -0,0 +1,204 @@
+@border-color: #e4eefd;
+
+.code-box {
+	position: relative;
+	width: 100%;
+	margin: 0 0 30px;
+    border: 1px solid @border-color;
+	border-radius: 3px;
+	transition: .3s;
+	overflow: hidden;
+
+	&:hover {
+		box-shadow: 0 0 5px #ddd;
+	}
+
+	&-demo {
+		padding: 20px;
+		color: rgba(0,0,0,0.65);
+		border-bottom: 1px solid @border-color;
+	}
+
+	&-title {
+		position: relative;
+    	padding: 10px 20px;
+		margin: 0 !important;
+		background: rgba(139, 200, 255, 0.1);
+		border-bottom: 1px solid #f5f5f5;
+		color: #333 !important;
+    	font-weight: 500 !important;
+	}
+
+	&-desc {
+		margin-left: 5px;
+		font-size: 12px;
+		font-weight: 400;
+		color: #888;
+	}
+
+	&-actions {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 10px 0;
+		transition: .3s;
+		letter-spacing: 2px;
+		background: rgba(139, 200, 255, 0.05);
+		color: #52a6fa;
+		cursor: pointer;
+
+		&.expand .icon {
+			opacity: 1;
+		}
+	}
+
+	.icon {
+		margin: 0 12px;
+		display: flex;
+		align-items: center;
+		opacity: .4;
+		transition: .2s;
+		cursor: pointer;
+		user-select: none;
+
+		img {
+			margin-right: 4px;
+			vertical-align: top;
+			width: 16px;
+			height: auto;
+			cursor: pointer;
+		}
+
+		&-desc {
+			white-space: nowrap;
+			overflow: hidden;
+			font-weight: 300;
+		}
+	}
+
+	&:hover &-actions {
+		.icon {
+			opacity: 1;
+		}
+	}
+
+	> *:last-child {
+		border-bottom: none;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.code-block {
+		margin-top: 0;
+		margin-bottom: 0;
+		padding: 15px;
+		padding-bottom: 25px;
+		line-height: 1.42;
+		color: #405d79;
+		background: #fbfbfb;
+		border-top: 1px solid @border-color;
+		overflow-y: auto;
+	}
+}
+
+:global {
+	.hljs {
+		display: block;
+		overflow-x: auto;
+		padding: 0.5em;
+		color: #333;
+		background: #f8f8f8;
+	  }
+
+	  .hljs-comment,
+	  .hljs-quote {
+		color: #998;
+		font-style: italic;
+	  }
+
+	  .hljs-keyword,
+	  .hljs-selector-tag,
+	  .hljs-subst {
+		color:#118ddd;
+		font-weight: bold;
+	  }
+
+	  .hljs-number,
+	  .hljs-literal,
+	  .hljs-variable,
+	  .hljs-template-variable,
+	  .hljs-tag .hljs-attr {
+		color: #008080;
+	  }
+
+	  .hljs-string,
+	  .hljs-doctag {
+		color: #03a6ab;
+	  }
+
+	  .hljs-title,
+	  .hljs-section,
+	  .hljs-selector-id {
+		color: #900;
+		font-weight: bold;
+	  }
+
+	  .hljs-subst {
+		font-weight: normal;
+	  }
+
+	  .hljs-type,
+	  .hljs-class .hljs-title {
+		color: #049ac1;
+		font-weight: bold;
+	  }
+
+	  .hljs-tag,
+	  .hljs-name,
+	  .hljs-attribute {
+		color: #000080;
+		font-weight: normal;
+	  }
+
+	  .hljs-regexp,
+	  .hljs-link {
+		color: #009926;
+	  }
+
+	  .hljs-symbol,
+	  .hljs-bullet {
+		color: #990073;
+	  }
+
+	  .hljs-built_in,
+	  .hljs-builtin-name {
+		color: #0086b3;
+	  }
+
+	  .hljs-meta {
+		color: #999;
+		font-weight: bold;
+	  }
+
+	  .hljs-deletion {
+		background: #fdd;
+	  }
+
+	  .hljs-addition {
+		background: #dfd;
+	  }
+
+	  .hljs-emphasis {
+		font-style: italic;
+	  }
+
+	  .hljs-strong {
+		font-weight: bold;
+	  }
+
+	  .hljs-params {
+
+	  }
+}

package/demos/components/markdown/index.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import CodeBox from '../code-box';
+import classes from './index.less';
+
+const createElement = (className = '__empty__') => {
+	const element = document.createElement('div');
+	element.classList.add(className);
+	return element;
+}
+
+const separateMarkdownHtml = html => {
+	const container = createElement();
+	const tmpWrap = createElement();
+	tmpWrap.innerHTML = html;
+
+	let markdownBody = createElement(classes.markdownBody);
+
+	[...tmpWrap.children].forEach(element => {
+		if (!element.id || element.id !== 'code-demo') {
+			markdownBody.appendChild(element);
+		} else {
+			// append markdownBody
+			container.appendChild(markdownBody);
+
+			// append code-demo Element
+			container.appendChild(element);
+
+			// create a new markdownBody
+			markdownBody = createElement(classes.markdownBody);
+		}
+	});
+
+	container.appendChild(markdownBody);
+
+	return container.innerHTML;
+}
+
+export default class MarkdownOutput extends React.Component {
+	static propTypes = {
+		demos: PropTypes.any,
+		title: PropTypes.string,
+		html: PropTypes.string,
+		subtitle: PropTypes.string
+	};
+
+	static defaultProps = {
+		demos: [],
+		title: '',
+		html: '',
+		subtitle: ''
+	};
+
+	constructor(props) {
+		super(props);
+		this.markdownRef = React.createRef();
+		this.wrapers = [];
+	}
+
+	componentDidMount() {
+		const { demos } = this.props;
+		this.markdownBody.parentNode.scrollTop = 0;
+
+		demos
+			.sort((p, n) => p.order - n.order)
+			.filter(v => v).forEach(Demo => {
+				const wrap = document.createElement('div');
+
+				ReactDOM.render(
+					<CodeBox title={Demo.title} desc={Demo.desc} code={Demo.code} css={Demo.css}>
+						<Demo />
+					</CodeBox>,
+					wrap
+				);
+
+				this.wrapers.push(wrap);
+
+				this.codeWrap.appendChild(wrap);
+			});
+	}
+
+	componentWillUnmount() {
+		this.wrapers.forEach(ReactDOM.unmountComponentAtNode);
+	}
+
+	get markdownBody() {
+		return this.markdownRef.current;
+	}
+
+	get codeWrap() {
+		return this.markdownBody.querySelector('#code-demo');
+	}
+
+	render() {
+		const { title, html, subtitle } = this.props;
+
+		return (
+			<section ref={this.markdownRef}>
+				<h1 className={classes.title}>{title} {subtitle}</h1>
+				<div dangerouslySetInnerHTML={{ __html: separateMarkdownHtml(html) }} />
+			</section>
+		);
+	}
+}