0,1

components/BiosanUi.js

@@ -0,0 +1,8 @@
+import Row from "./layout/row.jsx";
+import Col from "./layout/col.jsx";
+
+var BiosanUi = {
+	Row : Row,
+	Col : Col
+}
+export default BiosanUi;

components/layout/col.jsx

@@ -0,0 +1,62 @@
+import './style/index.js';
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
+
+export default class Col extends React.Component{
+	constructor(props){
+		super(props);
+		this.props = props;
+	}
+
+	render(){
+		let props = this.props;
+		const { span, order, offset, push, pull, className, children,...others} = this.props;
+		let sizeClassObj = {};
+
+		['xs', 'sm', 'md', 'lg'].forEach(size => {
+			let sizeProps = {};
+			if (typeof props[size] === 'number') {
+			sizeProps.span = props[size];
+			} else if (typeof props[size] === 'object') {
+			sizeProps = props[size] || {};
+			}
+			sizeClassObj = {
+				...sizeClassObj,
+				[`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+				[`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
+				[`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
+				[`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
+				[`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
+			};
+		});
+
+		const classes = classNames({
+			[`ant-col-${span}`]: span !== undefined,
+			[`ant-col-order-${order}`]: order,
+			[`ant-col-offset-${offset}`]: offset,
+			[`ant-col-push-${push}`]: push,
+			[`ant-col-pull-${pull}`]: pull,
+			[className]: !!className,
+			...sizeClassObj,
+		});
+
+		return <div {...others} className={classes}>{children}</div>;
+	}
+}
+
+Col.propTypes = {
+  span: stringOrNumber,
+  order: stringOrNumber,
+  offset: stringOrNumber,
+  push: stringOrNumber,
+  pull: stringOrNumber,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  xs: objectOrNumber,
+  sm: objectOrNumber,
+  md: objectOrNumber,
+  lg: objectOrNumber,
+};

components/layout/row.jsx

@@ -0,0 +1,47 @@
+import './style/index';
+import React,{ Children, cloneElement } from 'react';
+import classNames from 'classnames';
+
+export default class Row extends React.Component{
+	constructor(...args){
+		super(...args);
+		this.gutter = 0;
+	}
+	render(){
+		const { type, justify, align, className, gutter, style, children ,...others} = this.props;
+		const classes = classNames({
+			'ant-row': !type,
+			[`ant-row-${type}`]: type,
+			[`ant-row-${type}-${justify}`]: justify,
+			[`ant-row-${type}-${align}`]: align,
+			[className]: className,
+		});
+		const rowStyle = gutter > 0 ? {
+			marginLeft: gutter / -2,
+			marginRight: gutter / -2,
+			...style,
+		} : style;
+		const cols = Children.map(children, col => {
+			if (!col) return null;
+
+			return cloneElement(col, {
+				style: gutter > 0 ? {
+					paddingLeft: gutter / 2,
+					paddingRight: gutter / 2,
+					...col.props.style,
+				} : col.props.style,
+			});
+		});
+		return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
+	}
+}
+
+Row.propTypes = {
+    type: React.PropTypes.string,
+    align: React.PropTypes.string,
+    justify: React.PropTypes.string,
+    className: React.PropTypes.string,
+    children: React.PropTypes.node,
+    gutter: React.PropTypes.number
+}
+

components/layout/style/index.js

@@ -0,0 +1 @@
+import './index.less';

components/layout/style/index.less

@@ -0,0 +1,103 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "./mixin";
+
+
+// Grid system
+.ant-row {
+  .make-row();
+  display: block;
+}
+
+.ant-row-flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  &:before,
+  &:after {
+    display: flex;
+  }
+}
+
+// x轴原点
+.ant-row-flex-start {
+  justify-content: flex-start;
+}
+
+// x轴居中
+.ant-row-flex-center {
+  justify-content: center;
+}
+
+// x轴反方向
+.ant-row-flex-end {
+  justify-content: flex-end;
+}
+
+// x轴平分
+.ant-row-flex-space-between {
+  justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.ant-row-flex-space-around {
+  justify-content: space-around;
+}
+
+// 顶部对齐
+.ant-row-flex-top {
+  align-items: flex-start;
+}
+
+// 居中对齐
+.ant-row-flex-middle {
+  align-items: center;
+}
+
+// 底部对齐
+.ant-row-flex-bottom {
+  align-items: flex-end;
+}
+
+.ant-col {
+  position: relative;
+  display: block;
+}
+
+.make-grid-columns();
+.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}

components/layout/style/mixin.less

@@ -0,0 +1,88 @@
+@import "../../style/mixins/index";
+
+// mixins for grid system
+// ------------------------
+.make-row(@gutter: @grid-gutter-width) {
+  position: relative;
+  margin-left: (@gutter / -2);
+  margin-right: (@gutter / -2);
+  height: auto;
+  .clearfix;
+}
+
+.make-grid-columns() {
+  .col(@index) {
+    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) {
+    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) {
+    @{list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      padding-left:  (@grid-gutter-width / 2);
+      padding-right: (@grid-gutter-width / 2);
+    }
+  }
+  .col(1);
+}
+
+.float-grid-columns(@class) {
+  .col(@index) { // initial
+    @item: ~".ant-col@{class}-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general
+    @item: ~".ant-col@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      float: left;
+      flex: 0 0 auto;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+// lesshint false
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .ant-col@{class}-@{index} {
+    display: block;
+    width: percentage((@index / @grid-columns));
+  }
+  .ant-col@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+  .ant-col@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+  .ant-col@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+  .ant-col@{class}-order-@{index} {
+    order: @index;
+  }
+  .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .ant-col@{class}-@{index} {
+    display: none;
+  }
+  .ant-col-push-@{index} {
+    left: auto;
+  }
+  .ant-col-pull-@{index} {
+    right: auto;
+  }
+}
+
+.make-grid(@class: ~'') {
+  .float-grid-columns(@class);
+  .loop-grid-columns(@grid-columns, @class);
+}