feat: 增加写字板组件

cuke-ui · Aug 27, 2018 · 5328e4a · 5328e4a
1 parent 1ae9242
commit 5328e4a
Show file tree

Hide file tree

Showing 17 changed files with 325 additions and 5 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -3,8 +3,10 @@ import { configure } from '@storybook/react';
 const req = require.context('../components', true, /\.stories\.js$/)
 
 function loadStories() {
-  require('../stories/button.js');
-  require('../stories/musicPlayer.js');
+  require('../stories/general');    //普通
+  require('../stories/player');     //视听娱乐
+  require('../stories/navigation'); //导航
+  require('../stories/dataEntry'); //数据录入
 }
 
 configure(loadStories, module);
diff --git a/components/breadcrumb/Breadcrumb.js b/components/breadcrumb/Breadcrumb.js
@@ -0,0 +1,40 @@
+import React, { PureComponent, cloneElement } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+
+export default class Breadcrumb extends PureComponent {
+	static defaultProps = {
+		prefix: 'cuke-breadcrumb',
+		separator: '/'
+	};
+
+	static propTypes = {
+		separator: PropTypes.oneOfType([
+			PropTypes.string.isRequired,
+			PropTypes.object.isRequired,
+		])
+	};
+
+	render() {
+		const { prefix, className, separator, children, ...attr } = this.props;
+
+		const items = React.Children.map(children, (element, index) => {
+			return cloneElement(element, {
+				separator,
+				key: index
+			});
+		});
+
+		return (
+			<div
+				className={cls(
+					prefix,
+					className
+				)}
+				{...attr}
+			>
+				{items}
+			</div>
+		);
+	}
+}
diff --git a/components/breadcrumb/BreadcrumbItem.js b/components/breadcrumb/BreadcrumbItem.js
@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+
+class BreadcrumbItem extends PureComponent {
+	static defaultProps = {
+		prefix: 'cuke-breadcrumb-item',
+		separator: '/'
+	};
+
+	render() {
+		const { prefix, className, separator, children, ...attr } = this.props;
+		return (
+			<span className={cls(prefix, className)} {...attr}>
+				<span className={`${prefix}-text`}>{children}</span>
+				<span className={`${prefix}-separator`}>{separator}</span>
+			</span>
+		);
+	}
+}
+
+export default BreadcrumbItem;
diff --git a/components/breadcrumb/index.js b/components/breadcrumb/index.js
@@ -0,0 +1,7 @@
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbItem from './BreadcrumbItem';
+import "./styles.less"
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;
diff --git a/components/breadcrumb/styles.less b/components/breadcrumb/styles.less
@@ -0,0 +1,21 @@
+@import "../styles/vars.less";
+
+.cuke-breadcrumb {
+  margin-bottom: 20px;
+  padding: 10px 15px;
+  line-height: normal;
+  color: lighten(@font-color,50%);
+
+  > span:last-child {
+    font-weight: bold;
+    color: @font-color;
+
+    .cuke-breadcrumb-item-separator {
+      display: none;
+    }
+  }
+  .cuke-breadcrumb-item-separator {
+    margin: 0 8px;
+    color: #d9d9d9;
+  }
+}
diff --git a/components/button/index.js b/components/button/index.js
@@ -2,7 +2,6 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import cls from "classnames";
 import { IoIosRefresh } from "react-icons/io";
-// console.log(a);
 import "./styles.less";
 
 export default class Button extends PureComponent {

diff --git a/components/index.js b/components/index.js
@@ -0,0 +1,5 @@
+
+export { default as Button } from './button';
+export { default as BreadCrumb } from './breadcrumb';
+export { default as MusicPlayer } from './musicPlayer';
+export { default as WordPad } from './wordPad';
diff --git a/components/input/index.js b/components/input/index.js
@@ -0,0 +1,36 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+
+//TODO: 输入框组件
+export default class Input extends PureComponent {
+	static defaultProps = {
+		prefix: 'cuke-input',
+	};
+
+	static propTypes = {
+		separator: PropTypes.oneOfType([
+			PropTypes.string.isRequired,
+			PropTypes.object.isRequired,
+		])
+	};
+
+	render() {
+    const {
+      prefix,
+      className,
+      ...attr
+    } = this.props
+		return (
+			<div
+				className={cls(
+					prefix,
+					className
+				)}
+				{...attr}
+			>
+				<input type="text"/>
+			</div>
+		);
+	}
+}
diff --git a/components/input/styles.less b/components/input/styles.less
@@ -0,0 +1,3 @@
+.cuke-input {
+
+}
diff --git a/components/wordPad/index.js b/components/wordPad/index.js
@@ -0,0 +1,117 @@
+import React, { PureComponent } from 'react';
+import propTypes from 'prop-types';
+import cls from 'classnames'
+
+import './styles.less';
+
+export default class WordPad extends PureComponent {
+	state = {
+		isMouseDown: false,
+		//上一次的坐标
+		lastCoordinate: {
+			x: 0,
+			y: 0
+		}
+	};
+	static defaultProps = {
+		prefix: 'cuke-word-pad',
+		clear: false,
+		width: 700,
+		height: 700,
+		lineCap:"round",
+		lineJoin: "round",
+		strokeWidth: 10,
+		strokeColor: "#444",
+		getCanvas: ()=>{}
+	};
+	static propTypes = {
+		width: propTypes.number.isRequired,
+		height: propTypes.number.isRequired,
+		strokeColor: propTypes.string,
+		strokeWidth: propTypes.number,
+		lineJoin: propTypes.string,
+		lineCap: propTypes.string,
+		getCanvas: propTypes.func
+	};
+	constructor(props) {
+		super(props);
+	}
+	render() {
+		const { prefix, className, ...attr } = this.props;
+		return (
+			<canvas
+				className={cls(prefix, className)}
+				{...attr}
+				ref={node => (this.canvas = node)}
+			>
+				你的浏览器不支持 canvas
+			</canvas>
+		);
+	}
+	clear() {
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+	}
+	windowToCanvas(x, y) {
+		const { left, top } = this.canvas.getBoundingClientRect();
+		return {
+			x: Math.round(x - left),
+			y: Math.round(y - top)
+		};
+	}
+	bindEvents() {
+		this.canvas.onmousedown = e => {
+			e.preventDefault();
+			this.setState({ isMouseDown: true });
+			this.setState({
+				lastCoordinate: this.windowToCanvas(e.clientX, e.clientY)
+			});
+		};
+		this.canvas.onmouseup = e => {
+			e.preventDefault();
+			this.setState({
+				isMouseDown: false
+			});
+		};
+		this.canvas.onmouseout = e => {
+			e.preventDefault();
+			this.setState({
+				isMouseDown: false
+			});
+		};
+		this.canvas.onmousemove = e => {
+			e.preventDefault();
+			const { isMouseDown, lastCoordinate } = this.state;
+			const { strokeColor,strokeWidth,lineCap,lineJoin } = this.props;
+			if (isMouseDown) {
+				//如果鼠标移动的时候鼠标是按下时  执行绘制
+				const nowCoordinate = this.windowToCanvas(e.clientX, e.clientY);
+				this.ctx.beginPath();
+				this.ctx.moveTo(lastCoordinate.x, lastCoordinate.y);
+				this.ctx.lineTo(nowCoordinate.x, nowCoordinate.y);
+				this.ctx.lineWidth = strokeWidth;
+				this.ctx.strokeStyle = strokeColor;
+				this.ctx.lineCap = lineCap; //线是圆滑的
+				this.ctx.lineJoin = lineJoin; //两根线过渡圆形
+				this.ctx.stroke();
+
+				//更新坐标
+				this.setState({
+					lastCoordinate: nowCoordinate
+				});
+			}
+		};
+	}
+	componentWillReceiveProps({ clear }) {
+		if (clear) {
+			this.clear();
+		}
+	}
+	componentDidMount() {
+		const { width, height } = this.props;
+		this.ctx = this.canvas.getContext('2d');
+		this.canvas.width = width;
+		this.canvas.height = height;
+		this.bindEvents();
+		this.props.getCanvas(this.canvas, this.ctx);
+	}
+}
diff --git a/components/wordPad/styles.less b/components/wordPad/styles.less
@@ -0,0 +1,3 @@
+.cuke-word-pad {
+  display: block;
+}
diff --git a/package.json b/package.json
@@ -92,6 +92,7 @@
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "lint-staged": "^7.0.4",
+    "normalize.css": "^8.0.0",
     "open-browser-webpack-plugin": "0.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "postcss": "^6.0.12",

diff --git a/stories/dataEntry.js b/stories/dataEntry.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from "@storybook/addon-actions";
+import WordPad from '../components/wordPad';
+import Button from '../components/button';
+
+storiesOf('数据录入', module).add('WordPad 写字板', () => (
+	<div>
+    <h3>用鼠标在上面写字</h3>
+		<WordPad
+			width={300}
+			height={300}
+			style={{
+				border: '1px solid #444',
+        margin:"10px 0"
+			}}
+      getCanvas={(canvas,ctx)=> action(canvas,ctx)}
+		/>
+    <Button type="primary">获取文字</Button>
+
+    <h3>自定义画笔</h3>
+    <WordPad
+			width={200}
+			height={200}
+      strokeColor="#396"
+      strokeWidth={3}
+			style={{
+				border: '1px solid #444',
+        margin:"10px 0"
+			}}
+
+		/>
+	</div>
+));
diff --git a/stories/button.js → stories/general.js b/stories/button.js → stories/general.js
@@ -3,7 +3,8 @@ import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import Button from "../components/button";
 
-storiesOf("Button 按钮", module).add("按钮", () => (
+storiesOf("普通", module)
+.add("Button 按钮", () => (
 	<div>
 		<p>
 			<Button onClick={action("clicked")}>默认</Button>

diff --git a/stories/navigation.js b/stories/navigation.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Breadcrumb from '../components/breadcrumb';
+
+storiesOf('导航', module).add('Breadcrumb 面包屑', () => (
+	<div>
+		<h3>默认导航</h3>
+		<Breadcrumb>
+			<Breadcrumb.Item>黄瓜 ui</Breadcrumb.Item>
+			<Breadcrumb.Item>面包屑</Breadcrumb.Item>
+			<Breadcrumb.Item>导航</Breadcrumb.Item>
+		</Breadcrumb>
+
+		<h3>自定义分隔符</h3>
+
+		<Breadcrumb separator=">">
+			<Breadcrumb.Item>黄瓜 ui</Breadcrumb.Item>
+			<Breadcrumb.Item>面包屑</Breadcrumb.Item>
+			<Breadcrumb.Item>
+				<a href="#">链接</a>
+			</Breadcrumb.Item>
+			<Breadcrumb.Item>导航</Breadcrumb.Item>
+		</Breadcrumb>
+	</div>
+));
diff --git a/stories/musicPlayer.js → stories/player.js b/stories/musicPlayer.js → stories/player.js
@@ -2,7 +2,8 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import MusicPlayer from "../components/musicPlayer";
 
-storiesOf("musicPlayer 音乐播放器", module).add("播放器", () => (
+storiesOf("视听娱乐", module)
+.add("MusicPlayer 音乐播放器", () => (
   <MusicPlayer audioLists={[{
     name:"星球坠落",
     singer:"中国新说唱",

diff --git a/yarn.lock b/yarn.lock
@@ -7656,6 +7656,10 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalize.css@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.0.tgz#14ac5e461612538a4ce9be90a7da23f86e718493"
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"